<!--  -->
<template>
  <el-container>
    <el-main>
      <div class="main">
        <div class="back-bar-box mb-30">
          <div class="btn-back" @click="goBack">
            <i class="el-icon-back"></i> 返回
          </div>
          <div class="line"></div>
          <div class="name">课时管理</div>
        </div>
        <div class="btn">
          <el-button type="primary" @click="addVedio">添加课时</el-button>
          <el-button type="primary">章节管理</el-button>
          <el-button type="danger">删除</el-button>
        </div>
        <div class="form">
          <el-table style="width: 100%" :data="videoData">
            <el-table-column type="selection" width="48"> </el-table-column>
            <el-table-column prop="id" label="ID" min-width="70" sortable>
            </el-table-column>
            <el-table-column label="课时" min-width="419">
              <template slot-scope="scope">
                <span
                  >{{ scope.row.chapter && scope.row.chapter.title + "/"}}</span
                >
                <span> {{ scope.row && scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="课时时长" min-width="165" sortable>
              <template slot-scope="scope">
                <span>{{
                  scope.row.duration / 60 &lt; 10
                    ? "0" + scope.row.duration / 60 + ":00"
                    : scope.row.duration / 60 + ":00"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="published_at"
              label="上架时间"
              min-width="176"
              sortable
            >
            </el-table-column>
            <el-table-column label="是否显示" min-width="88">
              <template slot-scope="scope">
                <span style="color: #04c877">{{
                  scope.row.is_show == 1 ? "· 显示" : "· 隐藏"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="154">
              <template slot-scope="scope">
                <el-link type="primary">学员</el-link>
                <el-link type="primary" class="member">编辑</el-link>
                <el-link type="primary">
                  <el-dropdown
                    :hide-on-click="false"
                    trigger="hover"
                    @command="handleCommand"
                  >
                    <span class="el-dropdown-link">
                      更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        style="color: #66b1ff"
                        :command="`edit-${scope.row.id}`"
                        >单独订阅</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { video } from "@/network/course";
import { Loading } from "element-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      videoData: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goBack: function () {
      this.$router.push({
        path: "/course/vod/index",
      });
    },
    handleCommand(command) {},
    addVedio:function(){
      this.$router.push({
        path: "/course/vod/video/create",
        query: {
          course_id: location.href.split("=")[1],
        }
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    let params = {
      cid: location.href.split("=")[1],
      page: 1,
      size: 10,
      sort: "published_at",
      order: "asc",
    };
    video(params).then((res) => {
      this.videoData = res?.data?.videos?.data;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss'  scoped>
.el-container {
  height: 100%;
  text-align: center;
}
.el-main {
  background-color: #f1f2f9;
  padding: 20px 5px 20px 20px;
  .main {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
    .back-bar-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: auto;
      float: left;
      margin-bottom: 30px;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        i.el-icon-back {
          font-family: element-icons !important;
          //   speak: none;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }
    .btn {
      text-align: left;
      margin-bottom: 30px;
    }
    .form {
      ::v-deep .el-table th.is-leaf {
        background-color: rgb(241, 242, 249);
      }
      ::v-deep .el-table th > .cell {
        color: #333;
      }
      ::v-deep .el-table th:last-child.is-leaf {
        text-align: right !important;
      }
      .el-dropdown {
        color: #409eff;
      }
      .el-link.el-link--primary {
        margin-left: 5px;
      }
    }
  }
}
</style>